<template>
  <div class="finerMark-container">
    <div class="topContent">
      <div class="seachBox">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="指标：">
            <el-input v-model="formInline.quotaName" placeholder="请输入指标名称"></el-input>
          </el-form-item>
          <div class="searchBut" @click="onSubmit()"><i class="iconfont icon-sousuo"></i> 搜索</div>
        </el-form>
      </div>
      <div class="addCont">
        <el-button type="primary" style="width:110px; height:36px" size="small" @click="addItem()"><span
          class="iconfont icon-tianjia"
        ></span>添加指标
        </el-button>
        <el-button type="primary" style="width:110px; height:36px" size="small" @click="addGpsItem()">GPS指标设置
        </el-button>
      </div>
    </div>
    <div class="contBox" v-infinite-scroll="handleCurrentChange" style="overflow:auto" v-loading="loading"
         infinite-scroll-immediate="false"
    >
      <div :class="['item', setTitColor(index)]" v-for="(item,index) in tableData" :key="index">
        <div @click="changeItem(index)">
          <div class="title">
            <div class="tit">
              <svg-icon icon-class="chart-line"/>
              <span class="long">{{ item.name }}</span></div>
            <div class="del el-icon-close" @click.stop="delItem(item.id)"></div>
          </div>
          <div class="cont">
            <div class=""><span> 单位：</span> {{ item.unit }}</div>
            <div class=""><span> 安全值：</span> {{ item.referenceValue }}</div>
          </div>
        </div>
      </div>
      <div class="noData" v-if="total <= 0">
        <img src="../../../assets/nodata.png" alt="" width="129">
      </div>
    </div>

    <pagination
      v-show="total>15"
      :total="total"
      :page.sync="formInline.pageNum"
      :limit.sync="formInline.pageSize"
      @pagination="getList" />
    <el-dialog
      :visible.sync="quotaDialogVisible"
      width="500px"
      center
      @close="resetForm('quota')"
    >
      <div
        slot="title"
        class="dialog-title"
      >
        {{ title }}
      </div>

      <el-form
        :rules="rules"
        :model="form"
        ref="quota"
        label-width="140px"
      >
        <el-form-item
          prop="name"
          label="指标名称："
        >
          <el-input
            placeholder="请输入指标名称"
            v-model="form.name"
            size="small"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="unit"
          label="单位："
        >
          <el-input
            placeholder="请输入单位"
            v-model="form.unit"
            maxlength="10"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="subject"
          label="报文主题："
        >
          <el-input
            placeholder="请输入报文主题"
            v-model="form.subject"
            maxlength="50"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="valueType"
          label="指标值数据类型："
        >
          <el-select
            placeholder="请选择指标值数据类型"
            v-model="form.valueType"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="valueKey"
          label="指标值字段："
        >
          <el-input
            placeholder="请输入指标值字段"
            v-model="form.valueKey"
            size="small"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="snKey"
          label="设备识别码字段："
        >
          <el-input
            placeholder="请输入设备识别码字段"
            v-model="form.snKey"
            maxlength="50"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="webhook"
          label="web hook："
        >
          <el-input
            placeholder="请输入web hook"
            v-model="form.webhook"
            maxlength="50"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="referenceValue"
          label="安全值："
        >
          <el-input
            placeholder="请输入安全值"
            v-model="form.referenceValue"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="resetForm('quota')"
          size="small"
          class="butBox"
        >取 消
        </el-button>
        <el-button
          type="primary"
          @click="submitQuotaForm('quota')"
          size="small"
          class="butBox"
          style="margin-left:30px"
        >确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="GPSDialogVisible"
      width="500px"
      center
    >
      <div
        slot="title"
        class="dialog-title"
      >
        GPS指标
      </div>

      <el-form
        :model="gpsForm"
        :rules="gpsRules"
        ref="gps"
        label-width="140px"
      >
        <el-form-item
          prop="subject"
          label="报文主题："
        >
          <el-input
            placeholder="请输入报文主题"
            v-model="gpsForm.subject"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="snKey"
          label="设备识别码字段："
        >
          <el-input
            placeholder="请输入设备识别码字段"
            maxlength="50"
            v-model="gpsForm.snKey"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="singleField"
          label="指标值类型："
        >
          <el-radio-group v-model="gpsForm.singleField">
            <el-radio :label="true">单字段</el-radio>
            <el-radio :label="false">多字段</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="gpsForm.singleField"
          prop="valueKey"
        >
          <el-input
            placeholder="请输入指标值字段（经纬度）"
            v-model="gpsForm.valueKey"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="gpsForm.singleField"
          prop="separation"
        >
          <el-input
            placeholder="请输入分隔符"
            v-model="gpsForm.separation"
            maxlength="20"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!gpsForm.singleField"
          prop="longitude"
        >
          <el-input
            placeholder="请输入指标值字段（经度）"
            v-model="gpsForm.longitude"
            size="small"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!gpsForm.singleField"
          prop="latitude"
        >
          <el-input
            placeholder="请输入指标值字段（纬度）"
            v-model="gpsForm.latitude"
            size="small"
            maxlength="20"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="GPSDialogVisible = false"
          size="small"
          class="butBox"
        >取 消
        </el-button>
        <el-button
          type="primary"
          @click="submitGPSForm('gps')"
          size="small"
          class="butBox"
          style="margin-left:30px"
        >确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {
  quota,
  addQuota,
  putQuota,
  delQuota,
  gps,
  addGps,
  putGps
} from '@/api/iot/fingerMark'

export default {
  name: 'equipment',
  components: {
  },
  data() {
    return {
      formInline: {
        quotaName: ''
      },
      page: 1,
      pageSize: 20,
      total: 1,
      tableData: [],
      loading: false,
      title: '添加指标',
      changeInd: '',

      options: [
        {
          value: 'Integer',
          label: '整数'
        },
        {
          value: 'Double',
          label: '小数'
        }
      ],

      quotaDialogVisible: false,
      GPSDialogVisible: false,
      getDataType: '',
      //添加指标数据
      form: {
        name: '',
        unit: '',
        subject: '',
        valueKey: '',
        valueType: '',
        snKey: '',
        webhook: '',
        referenceValue: ''
      },

      rules: {
        name: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        subject: [{ required: true, message: '请输入报文主题', trigger: 'blur' }],
        valueKey: [
          { required: true, message: '请输入指标值字段', trigger: 'blur' }
        ],
        valueType: [
          { required: true, message: '请选择指标值字段类型', trigger: 'change' }
        ],
        snKey: [
          { required: true, message: '请输入设备识别码字段', trigger: 'blur' }
        ],
        webhook: [{ required: false }],
        referenceValue: [
          { required: true, message: '请输入安全值', trigger: 'blur' }
        ]
      },

      //GPS指标
      gpsForm: {
        subject: '',
        snKey: '',
        singleField: true,
        valueKey: '',
        separation: '',
        latitude: '',
        longitude: ''
      },
      gpsRules: {
        subject: [{ required: true, message: '请输入报文主题', trigger: 'blur' }],
        snKey: [
          { required: true, message: '请输入设备识别码字段', trigger: 'blur' }
        ],
        singleField: [
          { required: true, message: '请选择指标值类型', trigger: 'change' }
        ],
        valueKey: [
          { required: true, message: '请输入指标值字段（经纬度）', trigger: 'blur' }
        ],
        separation: [{ required: true, message: '请输入分隔符', trigger: 'blur' }],
        latitude: [
          { required: true, message: '请输入指标值字段（纬度）', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请输入指标值字段（经度）', trigger: 'blur' }
        ]
      },
      //是否新增指标
      isAddPut: true,
      //是否新增GPS
      isGpsAddPut: true
    }
  },
  mounted() {
    this.getList()
  },
  watch: {
    'gpsForm.singleField': {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs['gps'].validate()
        })
      }
      // immediate: true,
      // deep: true
    }
  },
  methods: {
    setTitColor(index) {
      switch (index % 6) {
        case 1 : {
          return 'colStyB'
          break
        }
        case 2 : {
          return 'colStyC'
          break
        }
        case 3 : {
          return 'colStyD'
          break
        }
        case 4 : {
          return 'colStyE'
          break
        }
      }
    },

    //查询
    onSubmit(refId) {
      this.page = 1
      this.getDataType = 'search'
      this.getList()
    },

    async getList() {
      this.loading = true
      const data = await quota({
        page: this.page,
        pageSize: this.pageSize,
        ...this.formInline
      })
      console.log(data)
      if (this.getDataType === 'page') {
        this.tableData = [...this.tableData, ...data.rows]
        this.getDataType = ''
      } else {
        this.tableData = data.rows
      }
      this.total = data.total
      this.loading = false
    },

    handleCurrentChange() {
      if (!this.loading) {
        if (this.tableData.length < this.total) {
          this.page++
          this.getDataType = 'page'
          this.getList()
        } else {
          this.$message.success('已经是最后一页了！')
        }
      }
    },

    //添加指标提交
    submitQuotaForm(refId) {
      this.$refs[refId].validate(async(valid) => {
        if (valid == true) {
          let data = null
          if (this.isAddPut) {
            delete this.form.id
            data = await addQuota(this.form)
            if (data) {
              this.tableData.unshift(this.form)
              this.getList()
            }
          } else {
            data = await putQuota(this.form)
            if (data) {
              this.tableData[this.changeInd] = this.form
              this.getList()
            }
          }
          this.quotaDialogVisible = false
        }
      })
    },

    //添加指标
    addItem(refId) {
      this.quotaDialogVisible = true
      this.isAddPut = true
      this.title = '添加指标'
      this.$nextTick(() => {
        this.$refs['quota'].resetFields()
      })
    },

    //修改指标
    changeItem(refId) {
      this.changeInd = refId
      this.quotaDialogVisible = true
      this.title = '修改指标'
      this.isAddPut = false
      this.$nextTick(() => {
        this.form = Object.assign({}, this.tableData[refId])
      })
    },

    //删除指标
    async delItem(refId) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        const data = await delQuota(refId)
        this.getList()
      }).catch((err) => {
        console.log('取消操作！')
      })
    },

    //添加/修改GPS指标提交
    submitGPSForm(refId) {
      this.$refs[refId].validate(async(valid) => {
        if (valid == true) {
          if (this.isGpsAddPut) {
            const data = await addGps(this.gpsForm)
          } else {
            const data = await putGps(this.gpsForm)
          }
          this.GPSDialogVisible = false
        }
      })
    },

    //添加GPS指标
    async addGpsItem(refId) {
      this.GPSDialogVisible = true
      const data = await gps()
      if (data.id) {
        this.$nextTick(() => {
          this.gpsForm = Object.assign({}, data)
        })
        this.isGpsAddPut = false
      } else {
        this.$nextTick(() => {
          this.$refs['gps'].resetFields()
        })
      }
    },

    resetForm(refId) {
      this.$refs[refId].resetFields()
      this.quotaDialogVisible = false
      this.GPSDialogVisible = false
    }

  }
}

</script>

<style lang="scss">
.equipment {
  &-container {
    .el-form-item__label {
      color: #666666;
    }

    .el-form--inline .el-form-item {
      width: 280px;

      .el-select {
        width: 100%;
      }
    }

    .el-form--inline .el-form-item__content {
      width: calc(100% - 70px);
    }
  }
}
</style>
<style lang="scss" scoped>
.finerMark {
  &-container {
    background: #f3f4f7;
    padding: 28px 35px 20px 35px;

    .topContent {
      display: flex;
      justify-content: space-between;

      .seachBox {
        padding-left: 10px;
        margin-top: 20px;

        .searchBut {
          display: inline-block;
          position: relative;
          width: 89px;
          height: 36px;
          line-height: 38px;
          cursor: pointer;
          text-align: center;
          background: #ffffff;
          border: 1px solid #5584ff;
          border-radius: 4px;
          color: #5584ff;
        }
      }

      .addCont {
        display: flex;
        padding-left: 10px;
        font-size: 14px;
        margin-top: 20px;

        .iconfont {
          margin-right: 5px;
          position: relative;
          top: 1px;
        }
      }
    }

    .contBox {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      height: calc(100vh - 240px);
      padding-top: 20px;

      .item {
        position: relative;
        height: 120px;
        margin: 0px 10px 30px 10px;
        width: calc(20% - 20px);
        border-radius: 11px;
        background: #ffffff;
        .long {
          display: inline-block;
          width: 74px;
          overflow: hidden;
          height: 30px;
        }

        .title {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .tit {
            display: flex;
            position: relative;
            padding: 0 15px;
            width: 130px;
            height: 32px;
            line-height: 32px;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(left, #6EC1FF, #5584FF);
            border-radius: 0px 15px 15px 15px;

            .iconfont {
              margin-right: 10px;
            }
          }

          .del {
            display: none;
            color: #D8D8D8;
            position: relative;
            cursor: pointer;
            right: 5px;
            top: 5px;
          }
        }

        &:hover .del {
          display: block;
        }

        .cont {
          padding: 20px 20px 30px 20px;
          color: #333;
          line-height: 23px;

          span {
            color: #818693;
            font-size: 14px;
          }
        }
      }

      .colStyB {
        .title {
          .tit {
            background: linear-gradient(left, #FF5133, #B075FF);
          }
        }
      }

      .colStyC {
        .title {
          .tit {
            background: linear-gradient(left, #5CE2D1, #55C4FF);
          }
        }
      }

      .colStyD {
        .title {
          .tit {
            background: linear-gradient(left, #FF4E6D, #FF6941);
          }
        }
      }

      .colStyE {
        .title {
          .tit {
            background: linear-gradient(left, #FFB16E, #FF7955);
          }
        }
      }

      .colStyF {
        .title {
          .tit {
            background: linear-gradient(left, #45D282, #17CD99);
          }
        }
      }

      @media screen and(max-width: 1366px) {
        .item {
          width: calc(25% - 20px);
        }
      }
    }

    .pagination-container{
      background: transparent;
    }

    .butBox {
      width: 80px;
      height: 36px;
      border-radius: 4px;
    }
  }
}
</style>
